<template>
  <div>
    <div class="header bgcolor">标题</div>
    <div class="sidebar bgcolor">
      <el-menu default-active="1" class="el-menu-vertical-demo" router>
        <el-menu-item
          v-for="(item, index) in routes"
          :key="index"
          :index="item.path"
        >
          <i class="el-icon-setting"></i>
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </el-menu>
      <div class="content">
        <!-- <div class="breakcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div> -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: true,
      routes: [
        { path: '/home/home', title: '首页' },
        { path: '/home/restaurant', title: '商家列表' },
        { path: '/home/usermanager', title: '用户列表' },
        { path: '/home/commodity', title: '商品列表' },
        { path: '/home/detail', title: '订单列表' },
      ],
    }
  },
  methods: {
  },
}
</script>

<style>
.bgcolor {
  background-color: white;
}
.sidebar {
  display: flex;
  margin: 30px auto;
  max-width: 1200px;
  min-height: 430px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}
.header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e5e5e5;
}
.content {
  margin: 10px auto;
  width: 964px;
}
.breakcrumb {
  height: 30px;
  width: 100%;
  line-height: 30px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 150px;
  height: 600px;
}
</style>
